<template>
    <div class="recordV">
        <h1>来访报备记录</h1>
        <div class="VForm">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="来访日期" width="160">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.date1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="离开日期" width="160">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.date2 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>姓名: {{ scope.row.name }}</p>
                            <p>性别: {{ scope.row.gender }}</p>
                            <p>联系电话: {{ scope.row.phone }}</p>
                            <p>居住地: {{ scope.row.region }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.name }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="健康码">
                    <template slot-scope="scope">
                        <span>{{ scope.row.healthCode }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: []
            // tableData: [{
            //     name: '',
            //     gender: '',
            //     phone: '',
            //     healthCode: '',
            //     region: '',
            //     date1: '',
            //     date2: '',
            //     date3: '',
            //     date4: '',
            // }]
        }
    },
    created() {
        this.tableData.push(JSON.parse(this.$route.query.getV ? this.$route.query.getV : ''))
    },
}
</script>

<style scoped>
.recordV {
    padding: 20px;
}

.recordV h1 {
    margin: 0 70px 30px 0;
}

.recordV .VForm {
    margin: 0 auto;
    width: 600px;
}
</style>